<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">仓库设置</p>
        </div>
        <div class="view-container">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item prop="searchValue">
                    <el-input
                        v-model="queryParams.searchValue"
                        placeholder="仓库名称或代码"
                        clearable
                        size="small"
                        style="width:230px;"
                        @keyup.enter.native="handleQuery"
                    />
                    </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" class="list-search btn-success" color="#5ED4D4"
                        @click="handleQuery"
                    >搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" class="list-search"
                        @click="resetQuery"
                    >重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        class="btn-success"
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="warehouseAdd()"
                        v-hasPermi="['system:warehouse:insert']"
                    >新建</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="warehouseList" border>
                <el-table-column label="序号" type="index" align="center" width="50" />
                <el-table-column label="仓库编码"  align="center" prop="code" />
                <el-table-column label="仓库名称"  align="center" prop="name" :show-overflow-tooltip="true" />
                <el-table-column label="物理位置" align="center" prop="address" :show-overflow-tooltip="true" />
                <el-table-column label="库管员" align="center" prop="warehouseClerks" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <template v-for="item in  scope.row.warehouseClerks">
                            {{ item }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用仓位" align="center" prop="openPosition">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.openPosition"
                            active-color="#fd562c"
                            inactive-color="#52C41A"
                            active-value="1"
                            active-text="否"
                            inactive-value="0"
                            inactive-text="是"
                            @change="val => onOpenPosition(val, scope.row)"
                        >
                        </el-switch>
                        <!-- <div v-if="scope.row.openPosition == 0" style="color:#52C41A">是</div> -->
                        <!-- <div v-if="scope.row.openPosition == 1" style="color:#fd562c">否</div> -->
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100" >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click.native.stop="handleUpdate(scope.row)"
                            v-hasPermi="['system:warehouse:update']"
                            >添加库管员</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加库管员" :visible.sync="open" width="600px" top="50px" append-to-body center>
            <el-form :model="form" label-width="100px">
                <el-form-item label="库管员">
                    <el-select v-model="form.warehouseClerks" placeholder="请选择" multiple style="width:100%;">
                        <el-option
                            v-for="item in userList"
                            :key="item.userName"
                            :label="item.userName"
                            :value="item.userName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="btn-success mr20 width100" @click="submitForm">确 定</el-button>
                <el-button class="width100" @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryWarehouse, warehouseUpdate, warehouseUpdateStatus } from "@/api/system/warehouse/warehouse"
import { listUser } from "@/api/system/setting/user/user"
export default {
    name: "warehouseSetting",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 销售出库数据
            warehouseList: [],
            // 查询参数
            queryParams: {
                searchValue: undefined
            },
            open: false,
            form: {
                warehouseId: '',
                warehouseClerks: []
            },
            userList: [], // 用户列表
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            this.loading = true
            queryWarehouse(this.addDateRange(this.queryParams)).then(res => {
                this.warehouseList = res.data
                this.loading = false
            })
        },
        // 搜索按钮
        handleQuery() {
            this.getList()
        },
        // 重置按钮
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },
        // 新建
        warehouseAdd(){
            this.$router.push({path:"/warehouseManagement/warehouse/add"})
        },
        // 获取用户
        getUser(){
            listUser().then(res => {
                this.userList = res.rows
            })
        },
        // 是否启用仓库
        onOpenPosition(val, row){
            console.log(row)
            if(row.children == null || row.children == ''){
                warehouseUpdateStatus({warehouseId: row.warehouseId, openPosition: val}).then(res => {
                    this.$modal.msgSuccess("操作成功")
                })
            }else{
                this.$modal.msgSuccess("已存在仓位，不允许修改")
            }
        },
        // 添加库管员
        handleUpdate(row){
            this.getUser()
            this.open = true
            this.form.warehouseId = row.warehouseId
            this.form.warehouseClerks = row.warehouseClerks
        },
        // 提交
        submitForm() {
            if(this.form.warehouseClerks.length > 0){
                console.log(this.form)
                warehouseUpdate(this.form).then(res => {
                    this.$modal.msgSuccess("操作成功")
                    this.open = false
                    this.getList()
                })
            }else{
                this.$modal.msgSuccess("库管员不能为空")
            }
        },
        // 取消
        cancel() {
            this.open = false
            this.form = {
                warehouseId: '',
                warehouseClerks: []
            }
        }
    }
}
</script>